{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans 'Account Settings' %}{% endblock %}

{% block head %}
  <link href="{{ STATIC_URL }}css/jquery.Jcrop.min.css" rel="stylesheet">
  <script src="{{ STATIC_URL }}js/jquery.Jcrop.min.js"></script>
  <script src="{{ STATIC_URL }}js/picture.js"></script>
{% endblock head %}

{% block main %}
  <div class="page-header">
    <h1>{% trans 'Account Settings' %}</h1>
  </div>
  <div class="row" style="margin-top: 2em">
    <div class="col-md-3">
      {% include 'core/partial_settings_menu.html' with active='picture' %}
    </div>
    <div class="col-md-9">
      {% if messages %}
        {% for message in messages %}
          <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            {{ message }}
          </div>
        {% endfor %}
      {% endif %}
      <h3 style="margin-top: 0">{% trans 'Change Picture' %}</h3>
      <img src="{{ user.profile.get_picture }}" style="width: 150px; border-radius: 5px; margin-bottom: 1em;">
      <form enctype="multipart/form-data" method="post" action="{% url 'upload_picture' %}" id="picture-upload-form">
        {% csrf_token %}
        <input type="file" name="picture" style="display: none">
        <button type="button" class="btn btn-default" id="btn-upload-picture">{% trans 'Upload new picture' %}</button>
      </form>

      {% if uploaded_picture %}
        <form method="post" action="{% url 'save_uploaded_picture' %}">
          {% csrf_token %}
          <div class="modal fade" id="modal-upload-picture">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">{% trans 'Crop Picture' %}</h4>
                </div>
                <div class="modal-body">
                  <div class="selected-picture">
                    <p>{% trans 'Crop the profile picture and then click on the' %} <strong>{% trans 'Save Picture' %}</strong> {% trans 'button' %}</p>
                    <img src="{{ MEDIA_URL }}profile_pictures/{{ user.username }}_tmp.jpg?_={% now 'U' %}" id="crop-picture">
                    <input type="hidden" id="x" name="x" />
                    <input type="hidden" id="y" name="y" />
                    <input type="hidden" id="w" name="w" />
                    <input type="hidden" id="h" name="h" />
                  </div>
                  <script type="text/javascript">
                    $(function () {
                      $("#modal-upload-picture").modal();
                      window.history.pushState("", "", "/settings/picture/");
                    });
                  </script>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close' %}</button>
                  <button type="submit" class="btn btn-primary">{% trans 'Save changes' %}</button>
                </div>
              </div>
            </div>
          </div>
        </form>
      {% endif %}
    </div>
  </div>
{% endblock main %}
